<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <title>支付管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!--头部-->
  <header id="headerDiv" class="main-header">
    <!--#include  file="/pages/admin/header.html"-->
  </header>

  <!--左侧边栏 -->
  <aside id="sidebarDiv" class="main-sidebar">
    <!--#include  file="/pages/admin/sidebar.html"-->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <small>财务结算</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i> 支付管理</a></li>
        <li><a href="javascript:void(0);">财务结算</a></li>
      </ol>
    </section>

    <section class="content-header">

      <div class="container">
        <div class="row clearfix">
          <div class="col-md-12 column">
            <div class="modal fade" id="modal-container-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="box box-primary">
                    <!-- /.box-header -->
                    <div class="box-header">
                      <h3 class="box-title">导出数据</h3>
                    </div>
                    <div class="box-body">
                      <form id="dataForm" role="form">
                        <!-- text input -->
                        <div class="form-group">
                          <label>支付状态</label>
                          <label class="radio-inline">
                            <input name="stats" type="radio" value="0" checked>未支付</label>
                          <label class="radio-inline">
                            <input name="stats" type="radio" value="1" >已支付</label>
                          <label class="radio-inline">
                            <input name="stats" type="radio" value="" >全部</label>
                        </div>
                        <div class="form-group">
                          <div class="form-group">
                            <label>结算时间</label>
                            <label class="radio-inline">
                              <input type="radio" value="0" name="end_date" checked>没有结束日期
                            </label>
                            <label class="radio-inline">
                              <input type="radio" value="1" name="end_date">
                              <input id="end_date" disabled placeholder="YYYY-MM-DD" type="text" class="form-control">
                            </label>
                          </div>
                        </div>
                      </form>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button id="down_execl" type="button" class="btn btn-primary">导出</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <section class="content-header">

      <div class="container">
        <div class="row clearfix">
          <div class="col-md-12 column">
            <div class="modal fade" id="modal-container-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="box box-primary">
                    <!-- /.box-header -->
                    <div class="box-header">
                      <h3 class="box-title">手动结算</h3>
                    </div>
                    <div class="box-body">
                      <!-- text input -->
                      <div class="form-group">
                        <label>站长ID</label>
                        <label class="radio-inline">
                          <input type="number" id="uid">
                        </label>
                      </div>
                    </div>
                    <!-- /.box-body -->
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button id="createPaylog" type="button" class="btn btn-primary">结算</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <button class="btn btn-success" onclick="download()"><i class="fa fa-file-excel-o"></i>&nbsp;导出excel</button>
              <button class="btn btn-success" onclick="manual()"><i class="fa fa-file-excel-o"></i>&nbsp;手动结算</button>
              <form role="form" class="form-inline pull-right">
                <label class="control-label">搜索:</label>
                <div class="form-group">
                  <select id="paystats" class="form-control m-b" name="account">
                    <option value="">支付状态</option>
                    <option value="0">未支付</option>
                    <option value="1">已支付</option>
                  </select>

                </div>
                <div class="form-group">
                  <select id="clearingtype" class="form-control m-b" name="account">
                    <option value="">结算类型</option>
                    <option value="0">周结</option>
                    <option value="1">手动结算</option>
                  </select>

                </div>
                <div class="form-group">
                  <select id="searchKey" class="form-control m-b" name="account">
                    <option value="uid">渠道id</option>
                    <option value="uname">渠道名称</option>
                  </select>

                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input id="searchValue" type="text" class="form-control">
                    <span class="input-group-btn">
                <button type="button" class="btn btn-primary" onclick="search();"><i class="fa fa-search"></i></button>
                </span>
                  </div>
                </div>
              </form>
            </div>


            <div class="box-body table-responsive">
              <table id="datatable"  class="table table-bordered table-hover table-striped ">
                <thead>
                <tr>
                  <th><input id="checkAll" type="checkbox" /></th>
                  <th style=" white-space:nowrap">渠道id</th>
                  <th style=" white-space:nowrap">渠道名称</th>
                  <th style=" white-space:nowrap">款项</th>
                  <th style=" white-space:nowrap">日期</th>
                  <th style=" white-space:nowrap">佣金</th>
                  <th style=" white-space:nowrap">下线提成</th>
                  <th style=" white-space:nowrap">税</th>
                  <th style=" white-space:nowrap">手续费</th>
                  <th style=" white-space:nowrap">实付费用</th>
                  <th style=" white-space:nowrap">操作人</th>
                  <th style=" white-space:nowrap">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->



        </div>
      </div>
    </section>
    <!-- /.content -->

  </div>


  <!-- Control Sidebar -->
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/morris.js/morris.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/layer/layer.js"></script>
<script src="/dist/js/laydate/laydate.js"></script>


<script>
    var dataMap={};
    var datatable;
    $(function () {
        laydate.render({
            elem: '#end_date' //指定元素
        });
        $("#checkAll").click(function () {
            $("input[name='payids']:checkbox").prop("checked", this.checked);
        });
        //tab1
        datatable = $("#datatable").DataTable({
            'scrollCollapse': true,//
            'stateSave': false,//保存配置状态
            'processing': false, // 显示loading
            'paging': true,
            'lengthChange': false,
            'searching': false,// 取消搜索框
            'ordering': false,// 取消字段排序
            'info': true,
            'autoWidth': false,
            'deferRender': true,
            'serverSide': true, // ajax请求时必须写本项
            // 'pagingType' : 'full_numbers',
            'ajax': { // ajax请求
                'type': "POST",
                'url': "/lmgame/pay/paylogPage",
                'data': function (d) {
                    d.stats = $("#paystats").val();
                    d.searchKey = $("#searchKey").val();
                    d.searchValue = $("#searchValue").val();
                    return d;
                },
                "error": function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    if (xhr.status === 400) {
                        window.location.href = "/pages/admin/login.html";
                    }
                    if (xhr.status === 403) {
                        window.location.href = "/403.html";
                    }
                }
            },
            'columns': [ // data数据绑定对应列

                {"data": "id"},
                {
                    "class":          'details-control',
                    "orderable":      false,
                    "data":           "uid",
                    "defaultContent": ''
                },
                {
                    "class":          'details-control',
                    "orderable":      false,
                    "data":           "uname",
                    "defaultContent": ''
                },
                //{"data": "uname"},
                {"data": "clearingtype"},
                {"data": "day"},
                {"data": "money"},
                {"data": "xmoney"},
                {"data": "tax"},
                {"data": "charges"},
                {"data": "paymoney"},
                {"data": "clearingadmin"},
                {
                    "class":          'notab',
                    "data":           null
                }
            ],
            "columnDefs": [
                {
                    targets: 0,
                    render: function (a) {
                        return '<input name="payids" type="checkbox" />';
                    }
                },
                {
                    targets: 3,
                    render: function (a) {
                        if (a == 'week') {
                            return "周款";
                        }
                        return a;
                    }
                },
                {
                    targets: 11,
                    render: function (a) {
                        let html = "";
                        if (a.stats == "0") {
                            html += "<button onclick='doPay(\""+a.id+"\",\""+a.money+"\",\""+a.uname+"\",\""+a.uid+"\",\""+a.paymoney+"\",\""+a.xmoney+"\")' type=\"button\" class=\"btn btn-danger btn-sm\">未支付</button>";
                        }else {
                            html += "<button class='btn btn-sm bg-green'>已支付</button>";
                        }
                        return html;
                    }
                }
            ],
            "createdRow": function (row, data, index) {
                dataMap[data.id] = data;
            },
            'language': {
                'lengthMenu': "显示 _MENU_ 项结果", // 每页显示多少条
                'zeroRecords': "没有记录！", // 没有记录时显示的内容
                'info': "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", // 当前页信息
                'infoEmpty': "显示第 0 至 0 项结果，共 0 项", // 当前页信息-没有记录时
                'paginate': {
                    'previous': " << ",
                    'next': " >> "
                }
            }
        });


        $('#datatable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = datatable.row( tr );
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );

        $("input[name='end_date']").change(function () {
            if($(this).val() === '0'){
                $("#end_date").attr("disabled",true);
                $("#end_date").val("");
            }else{
                $("#end_date").removeAttr("disabled");
            }
        });

        $("#down_execl").click(function () {
            let url = "/lmgame/pay/exportExcel";
            let stats = $("input[name='stats']:checked").val();
            let end_date = $("#end_date").val();
            if(stats !== ''){
                url += "?stats="+stats;
                if(end_date !== ''){
                    url += "&date="+end_date;
                }
            }else{
                if(end_date !== ''){
                    url += "?date="+end_date;
                }
            }
            window.location.href = url;
        });

        $("#createPaylog").click(function () {
            let url = "/lmgame/pay/manual";
            let uid = $("#uid").val();
            if(uid == null || uid === ''){
                layer.msg("站长ID不能为空");
                return;
            }
            $.ajax({
                type : 'POST',
                url : url,
                data :{'uid':uid},
                dataType : "json",
                success: function(data) {
                    if (data.code != 0) {
                        layer.msg(data.msg);
                    } else {
                        layer.msg('结算成功', {
                            icon: 1,
                            time: 1000 //3秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            $("#modal-container-2").modal("hide");
                            datatable.ajax.reload(false);
                        });
                    }
                },
                error: function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    flag=true;
                    if (xhr.status === 400) {
                        window.location.href = "/pages/admin/login.html";
                    }
                    if (xhr.status === 403) {
                        window.location.href = "/403.html";
                    }
                }
            });
        });
    });

    function format ( d ) {
        return '<table  border="0" >'+
            '<tr>'+
            '<td class="pad20">银行信息:</td>'+
            '<td class="pad20">'+d.bankname+' '+d.bankbranch+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">收款姓名:</td>'+
            '<td class="pad20">'+d.accountname+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">收款帐号:</td>'+
            '<td class="pad20">'+d.bankaccount+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td class="pad20">实付金额:</td>'+
            '<td class="pad20">'+d.paymoney+'</td>'+
            '</tr>'+
            // '<tr>'+
            // '<td class="pad20"></td>'+
            // '<td class="pad20"><button type="button" onclick="doPay(\''+d.id+'\',\''+d.money+'\',\''+d.uname+'\',\''+d.uid+'\',\''+d.paymoney+'\',\''+d.xmoney+'\')" class="btn btn-success">已完成转账</button></td>'+
            // '</tr>'+
            '</table>';
    }

    function search() {
        datatable.ajax.reload(false);
    }

    function doPay(payid,money,uname,uid,paymoney,xmoney) {

        let msg=uname+'的佣金'+paymoney+'已付，确认结算?';
        layer.confirm(msg, {
            btn: ['确定','取消'] //按钮
        }, function(){
            let url="/lmgame/pay/updateStats";
            $.ajax({
                type : 'POST',
                url : url,
                data :{'id':payid,'money':money,'uid':uid,'paymoney':paymoney,'xmoney':xmoney},
                dataType : "json",
                success: function(data) {
                    if (data.code != 0) {
                        layer.msg(data.msg);
                    } else {
                        layer.msg('结算成功', {
                            icon: 1,
                            time: 1000 //3秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            datatable.ajax.reload(false);
                        });
                    }
                },
                error: function (xhr, ts, et) { //XMLHttpRequest, textStatus, errorThrown
                    flag=true;
                    if (xhr.status === 400) {
                        window.location.href = "/pages/admin/login.html";
                    }
                    if (xhr.status === 403) {
                        window.location.href = "/403.html";
                    }
                }
            });
        }, function(){

        });
    }

    function download(){
        $("#modal-container-1").modal("show");
    }

    function manual(){
        $("#uid").val("");
        $("#modal-container-2").modal("show");
    }


    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "H+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

</script>
<style>

  td.details-control {
    text-decoration: underline;
    cursor: pointer;
  }
  tr.shown td.details-control {
  }
  .pad20{
    padding: 5px;
  }

</style>
</body>
</html>
